<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-divider content-position="left">图表分析区</el-divider>
          <div
            style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-form style="margin: 10px 30px;" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline">
              <el-form-item label="班级名称" prop="classroomName">
                <el-select v-model="ruleForm.classroomName" clearable placeholder="请选择班级">
                  <el-option
                    v-for="item in classroomNames"
                    :key="item.classroomName"
                    :label="item.classroomName"
                    :value="item.classroomName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="课程名称" prop="courseName">
                <el-select v-model="ruleForm.courseName" clearable placeholder="请选择课程">
                  <el-option
                    v-for="item in courseNames"
                    :key="item.courseName"
                    :label="item.courseName"
                    :value="item.courseName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">查看圆环图</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div v-loading="loading"
               :element-loading-text="text"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)"
            style="margin: 10px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <div v-show="show">
              <li id="genderRatio" class="el-chart-1">
              </li>
              <li id="courseTask" class="el-chart-2">
              </li>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'
import * as echarts from 'echarts'

export default {
  name: 'main',
  data () {
    return {
      text: '',
      show: false,
      loading: true,
      classroomNames: [],
      courseNames: [],
      teacherId: '',
      ruleForm: {
        teacherName: '',
        classroomName: '',
        courseName: ''
      },
      genderRatio: {},
      courseTaskState: {},
      rules: {
        classroomName: [
          {required: true, message: '请选择班级', trigger: 'blur'}
        ],
        courseName: [
          {required: true, message: '请选择课程', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.text = '请选择班级课程加载图表'
  },
  beforeMount () {
    this.getTeacher()
  },
  mounted () {
    this.getAllClassroomNames()
    this.getAllCourseNames()
  },
  methods: {
    // 获取教师id
    getTeacher () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
      this.ruleForm.teacherName = JSON.parse(localStorage.getItem('teacher')).teacherName
    },
    // 获取当前老师名下的所有课程名称
    getAllCourseNames () {
      this.$axios.post('http://localhost:8888/getAllCourseNameByTeacherId/' + this.teacherId).then(res => {
        this.courseNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前老师名下的所有班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.classroomNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 提交表单信息，获取数据
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        // 上传表单信息
        if (valid) {
          // 提交表单给后端
          this.$axios.post('http://localhost:8888/teacherGetGenderRatioEChartsData/' + this.teacherId, this.ruleForm).then(res => {
            if (res.data.flag) {
              this.genderRatio = res.data.data.genderRatio
              this.courseTaskState = res.data.data.courseTaskState
              if (res.data.data.genderRatio.male !== null || res.data.data.genderRatio.female !== null) {
                this.$message({
                  message: '恭喜你，' + this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程男女数据获取成功，开始绘图.....',
                  type: 'success'
                })
                this.loading = false
                this.show = true
                // 绘制男女比例图
                this.genderRatioECharts()
              } else if (res.data.data.genderRatio.male === null || res.data.data.genderRatio.female === null) {
                this.loading = true
                this.show = false
                this.text = this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程暂无学生信息，请重新选择'
                this.$message({
                  message: '警告哦，' + this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程暂无学生信息，无法绘制图表',
                  type: 'warning'
                })
              }
              if (res.data.data.courseTaskState.underway !== null || res.data.data.courseTaskState.noStart !== null || res.data.data.courseTaskState.hasEnd !== null) {
                this.$message({
                  message: '恭喜你，' + this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程作业数据获取成功，开始绘图.....',
                  type: 'success'
                })
                this.show = true
                this.loading = false
                // 绘制作业三状态图
                this.courseTaskECharts()
              } else if (res.data.data.courseTaskState.underway === null || res.data.data.courseTaskState.noStart === null || res.data.data.courseTaskState.hasEnd === null) {
                this.loading = true
                this.show = false
                this.text = this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程暂无作业信息，请重新选择'
                this.$message({
                  message: '警告哦，' + this.ruleForm.classroomName + '班级下的' + this.ruleForm.courseName + '课程暂无作业信息，无法绘制图表',
                  type: 'warning'
                })
              }
            } else {
              this.$message.error('错了哦，数据获取失败')
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    // 绘制男女比例图
    genderRatioECharts () {
      var myChart = echarts.init(document.getElementById('genderRatio'))
      myChart.resize({
        width: 400,
        height: 400
      })
      let option = {
        title: {
          text: '男女性别比例',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '男女比例',
            type: 'pie',
            data: [
              {
                value: this.genderRatio.male,
                name: '男'
              },
              {
                value: this.genderRatio.female,
                name: '女'
              }
            ],
            radius: ['40%', '60%']
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      let currentIndex = -1

      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)
      myChart.setOption(option)
    },
    // 绘制课程作业状态图
    courseTaskECharts () {
      var myChart = echarts.init(document.getElementById('courseTask'))
      myChart.resize({
        width: 400,
        height: 400
      })
      let option = {
        title: {
          text: '作业三状态',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '作业状态',
            type: 'pie',
            data: [
              {
                value: this.courseTaskState.noStart,
                name: '未开始'
              },
              {
                value: this.courseTaskState.underway,
                name: '正在进行'
              },
              {
                value: this.courseTaskState.hasEnd,
                name: '已截止'
              }
            ],
            radius: ['40%', '60%']
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
      let currentIndex = -1

      setInterval(function () {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)
      myChart.setOption(option)
    }
  },
  components: {
    Left,
    Top
  }

}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }

  .el-chart-a {
    width: 1200px;
    height: 500px;
    margin: 10px auto;
  }

  .el-chart-1 {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    list-style-type: none;
    margin-left: 40px;
    margin-right: 50px;
  }

  .el-chart-2 {
    width: 400px;
    height: 400px;
    border-radius: 4px;
    list-style-type: none;
  }

  .el-chart-b {
    width: 1200px;
    height: 500px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  }

  li {
    float: left;
  }

  .el-chart {
    width: 100%;
    height: 250px;
  }

  .el-chart ul li {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    width: 220px;
    height: 120px;
    /*border: 1px solid gold;*/
    list-style-type: none;
    margin-right: 50px;
  }

  .el-chart ul li:hover {
    background-color: #eee;
  }
</style>
